<template>
  <div class="mask" v-show="showDialog">
    <div class="dialog" style="width:1800px;">
      <div class="dialog-header">
        <div class="title pos-left">{{modalData.name}} - {{dialogTitle}}</div>
        <ul class="tools pos-right">
          <li class="item">
            <button class="btn" type="button" @click="closeDialog">
              <i class="icon icon-close"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="dialog-body scroll">
        <p
          class="hint"
        >{{modalData.name}}同志该月的事项完成及时率，在{{modalData.groupName}}排名为{{modalData.rank}}，故该同志的响应速度得分为{{modalData.score}}分</p>
        <table class="dtable">
          <thead>
            <tr>
              <td>序号</td>
              <td>工作事项</td>
              <td>事项开始时间</td>
              <td>要求完成时间</td>
              <td>实际完成时间</td>
            </tr>
          </thead>
          <tbody v-if="list.length>0">
            <tr v-for="(item,idx) in list" :key="idx">
              <td style="width:10%;">{{idx + 1}}</td>
              <td style="width:30%;">
                <span :title="item.TypeName">{{item.TypeName|| '暂无'}}</span>
              </td>
              <td style="width:15%;">
                <span :title="item.StartTime">{{item.StartTime || '暂无'}}</span>
              </td>
              <td style="width:15%;">
                <span :title="item.EndTime">{{item.EndTime || '暂无'}}</span>
              </td>
              <td style="width:20%;">
                <span :title="item.FinishTime">{{item.FinishTime || '暂无'}}</span>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="5">暂无记录</td>
            </tr>
          </tbody>
        </table>
        <x-loading :show="showLoading"></x-loading>
        <x-pager
          :page="page"
          :page-size="pageSize"
          :total="total"
          :max-page="maxPage"
          @pagehandler="pageHandler"
        ></x-pager>
      </div>
    </div>
  </div>
</template>
<script>
import Pager from "@/components/Pager";
import Loading from "@/components/Loading";
import axios from "axios";

export default {
  data() {
    return {
      keyword: "",
      list: [],
      page: 1,
      pageSize: 10,
      total: 10,
      maxPage: 10,
      showLoading: false,
      showDialog: false,
      dialogTitle: "响应速度得分情况",
      selectTime: this.take,
      modalData: {
        name: null,
        score: 0,
        rank: null,
        date: null,
        groupName: null
      }
    };
  },
  components: {
    "x-pager": Pager,
    "x-loading": Loading
  },
  props: {
    take: Object,
    show: Boolean
  },
  watch: {
    show(n, o) {
      if (n !== o) {
        this.showDialog = n;
        this.pageHandler(0);
      }
    }
  },
  methods: {
    pageHandler(page) {
      this.show = true;
      this.modalData = this.take;
      this.page = page;
      let params = {
        startTime: this.modalData.date,
        Name: this.modalData.name,
        GroupName: this.modalData.groupName,
        pageIndex: this.page,
        pageSize: this.pageSize
      };
      this.showLoading = true;
      axios
        .get(this.URLHEAD + "OnTimeWorkGradeDetaile", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.list = data.Data;
          this.total = data.count;
          this.showLoading = false;
        });
    },
    reset() {
      this.page = 1;
      this.pageSize = 10;
    },
    closeDialog() {
      this.reset();
      this.showDialog = false;
    }
  }
};
</script>